<template>
	<div class="loginbody">
		<div class="bg-blur"></div>
		<vue-particles :particleOpacity="0.5" :particlesNumber="50"></vue-particles>
		<div class="login-box">
			<el-card>
				<div class="title">仟亿商户后台</div>
				<div class="logo"></div>
				<el-form :model="loginForm" :rules="rules" ref="loginForm" @submit.native.prevent>
					<el-form-item prop="username">
						<el-input type="text" v-model="loginForm.username" placeholder="请输入账户名" prefix-icon="el-icon-user"></el-input>
					</el-form-item>
					<el-form-item prop="password">
						<el-input type="password" v-model="loginForm.password" placeholder="请输入密码" prefix-icon="el-icon-lock"></el-input>
					</el-form-item>
					<el-form-item prop="codeValue">
						<el-input type="text" v-model="loginForm.codeValue" placeholder="请输入验证码" prefix-icon="el-icon-postcard">
							<template slot="append">
								<el-image @click="toggleCode" class="code" :src="imgSrc" alt="点击切换验证码">
									<div slot="placeholder" class="image-slot">
										加载中<span class="dot">...</span>
									</div>
								</el-image>
							</template>
						</el-input>
					</el-form-item>
					<el-form-item>
		                <el-button :loading="btnLoading" type="primary" native-type="submit" @click="submitForm('loginForm')">登 录</el-button>
					</el-form-item>
				</el-form>
			</el-card>
		</div>
	</div>
</template>

<script>
	import VueParticles from 'vue-particles'
	export default{
		name: 'Login',
		data() {
			return {
				btnLoading: false,
				imgSrc: '',
				loginForm: {
					username: 'test',
					password: 'test888',
					codeKey: null,
					codeValue: null,
				},
				rules: {
					username: [
						{ required: true, message: '请输入登录用户名', trigger: 'blur' },
						{ min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' },
					],
					password: [
						{ required: true, message: '请输入登录密码', trigger: 'blur' },
						{ min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' },
					],
					codeValue: [
						{ required: true, message: '请输入验证码', trigger: 'blur' },
						{ len: 4, message: '请输入 4 位的验证码', trigger: 'blur' },
					],
				},
			}
		},
		methods: {
			initData() {
				let _this = this;
				_this.$api.request({
					url: '/verifycode',
					beforeSend() {
						_this.codeLoading = true;
					},
					success(res) {
						_this.loginForm.codeKey = res.data.key
						_this.imgSrc = res.data.data
					},
					complete() {
						_this.codeLoading = false;
					}
				});
			},
			submitForm(formName) {
				let _this = this;
				//表单验证
				_this.$refs[formName].validate((valid) => {
					if (valid) {
						_this.$api.request({
							method: 'post',
							url: '/auth/login',
							data: _this.loginForm,
							beforeSend() {
								_this.btnLoading = true;
							},
							success(res) {
								//保存Token，以及跳转
								let tokenObj = {'accessToken': res.data.accessToken, 'refreshToken': res.data.refreshToken};
								_this.$store.commit('login', tokenObj);
							},
							complete(){
								_this.btnLoading = false;
							}
						})
					} else {
						return false;
					}
				})
			},
			//切换验证码
			toggleCode() {
				this.initData();
			},
		},
		created() {
			//初始化数据
			this.initData();
		}
	}
</script>

<style lang="scss">
	#particles-js {
		text-align: center;
		width: 100%;
		height: 100%;
		background-image: none;
		background-size: cover;
		background-position: 50% 50%;
		background-repeat: no-repeat;
		background-size: cover;
		overflow: hidden;
	}
	.loginbody {
		background: #002b5a;
		text-align: center;
		height: 100%;
	}
	.bg-blur {
		position: absolute;
		margin: -140px auto auto -140px;
		left: 50%;
		top: 50%;
		width: 280px;
		height: 280px;
		border-radius: 50%;
		filter: blur(150px);
		-moz-opacity: 0.6;
		opacity: 0.6;
		background: #fff;
	}
	
	.login-box {
		position: absolute;
		margin: -180px auto auto -150px;
		left: 50%;
		top: 50%;
		width: 300px;
		-moz-opacity: 0.9;
		opacity: 0.9;
		.el-card__body {
			padding: 20px 20px 0;
		}
		.title {
			margin: -20px -20px 20px;
			height: 40px;
			line-height: 40px;
			color: #1898ca;
			font-size: 15px;
			font-weight: 500;
			/*background: #e6eef3;*/
			text-shadow: 1px 1px #fff;
			box-shadow: 0 1px 4px rgba(0,0,0,0.27),0 0 60px rgba(0,0,0,0.1) inset;
		}
		.logo {
			margin-bottom: 20px;
			height: 42px;
			background: url(../../assets/images/logo.png) no-repeat center;
		}
		.el-button {
			display: block;
			width: 100%;
		}
		.code {
			width: 80px;
			height: 30px;
			vertical-align: middle;
			cursor: pointer;
		}
	}
</style>